<template>
	<view class="page">
		<view class="header">
			<button class="head" hover-class="none" open-type="getUserInfo" @getuserinfo="getuserinfo" :disabled="infoList.disabled" >
				<view class="headImg">
					<image :src="infoList.avatar_url" mode=""></image>
				</view>
				<view class="nickName">{{infoList.nickname}}</view>
			</button>
			<view class="foot">
				<view class="item">
					<view class="top">{{infoList.balance}}</view>
					<view class="bottom">余额(元)</view>
				</view>
				<view class="item_center"></view>
				<view class="item">
					<view class="top">{{infoList.coupon_total}}</view>
					<view class="bottom">优惠券</view>
				</view>
			</view>
		</view>
		<view class="order_message">
			<view class="item" @click="openOrder(0)">
				<view class="top">
					<image src="/static/images/order_1.png" mode=""></image>
				</view>
				<view class="bottom">待付款</view>
			</view>
			<view class="item" @click="openOrder(1)">
				<view class="top">
					<image src="/static/images/order_2.png" mode=""></image>
				</view>
				<view class="bottom">进行中</view>
			</view>
			<view class="item" @click="openOrder(2)">
				<view class="top">
					<image src="/static/images/order_3.png" mode=""></image>
				</view>
				<view class="bottom">已完成</view>
			</view>
			<view class="item" @click="openOrder(4)">
				<view class="top">
					<image src="/static/images/order_4.png" mode=""></image>
				</view>
				<view class="bottom">全部</view>
			</view>
		</view>
		<view class="topUp">
			<view class="item" @click="openTopUp()">
				<image src="/static/images/icon_topUp.png" mode=""></image>
				<text class="">我要充值</text>
				<text class="right">GO!</text>
				<uni-icon type="arrow" size="20" color="#3e3737" class="icon-right"></uni-icon>
			</view>
		</view>
		<view class="content">
			<view class="item" @click="makePhoneCall('15056034661')">
				<image src="/static/images/icon_service.png" mode=""></image>
				<text>联系客服</text>
				<uni-icon type="arrow" size="20" color="#3e3737" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openMap(31.864741,117.293870, 'nuclearcare 球鞋洗护', '安徽省合肥市庐阳区淮河路步行街百大胜道运动城3楼')">
				<image src="/static/images/icon_square.png" mode=""></image>
				<text>门店导航</text>
				<uni-icon type="arrow" size="20" color="#3e3737" class="icon-right"></uni-icon>
			</view>
			<view class="item" @click="openAboutme()">
				<image src="/static/images/icon_aboutme.png" mode=""></image>
				<text>关于我们</text>
				<uni-icon type="arrow" size="20" color="#3e3737" class="icon-right"></uni-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import { dns } from "@/pages/dns.js";
	import { HTTP } from "@/pages/http.js";
	let http = new HTTP();
	export default {
		data(){
			return {
				infoList: {
					avatar_url: '/static/images/SystemImage.jpg',
					nickname: '点击登录',
					disabled: '',
					balance: 0,
					coupon_total: 0
				}
			}
		},
		onLoad() {
			this.login();
		},
		onShow() {
			var token = uni.getStorageSync("token");
			if(token){
				this.myInfo();
			}
		},
		components: {
			uniIcon
		},
		methods:{
			//右上角分享功能
			onShareAppMessage: function (res) {
			  return {
			    title: 'unclearcare 球鞋洗护',
			    path: '/pages/index/index',
			    success: function (res) {
				  // 转发成功
			    },
			    fail: function (res) {
				  // 转发失败
			    }
			  }
			},
			myInfo(){
				http.request({
					url: 'member',
					success:(res)=>{
						if(res.data.code == 200){
							this.infoList.avatar_url = res.data.data.avatar_url;
							this.infoList.balance = res.data.data.balance;
							this.infoList.coupon_total = res.data.data.coupon_total;
							this.infoList.nickname = res.data.data.nickname;
						}
					}
				})
			},
			login(){
				var token = uni.getStorageSync("token");
				if(token){
					this.infoList.disabled = "disabled";
				}
				var session_key = uni.getStorageSync("session_key");
				if(!session_key){
					wx.login({//获取code
						success: function(res){
							http.request({
								method: 'POST',
								data: {
									code: res.code
								},
								url: 'wx/login',
								success:(res)=>{//获取session_key，openid
									if(res.data.code == 200){
										uni.setStorageSync("session_key", res.data.data.session_key);
									}
								}
							})
						}
					})
				};
			},
			getuserinfo(res){//调起微信登录授权
				//判断是否授权
				if (!res.detail.iv) {
					uni.showModal({
					    title: '提示',
						showCancel: false,
					    content: '需要通过授权才能继续，请重新点击并授权!',
					    success: function (res) {
					    }
					})
					return false;
				}
				http.request({
					method: 'POST',
					data: {
						session_key: uni.getStorageSync("session_key"),
						encrypteData: res.detail.encryptedData,
						iv: res.detail.iv
					},
					url: 'wx/memberdecrypt',
					success: (res2)=>{//用户信息解密
						if(res2.data.code == 200){
							uni.showLoading({
								title: '登陆中..'
							})
							setTimeout(()=>{
							    uni.hideLoading();
								uni.showToast({
								    title: '登陆成功！'
								})
								this.infoList.avatar_url = res2.data.data.avatar_url;
								this.infoList.nickname = res2.data.data.nickname;
								this.infoList.balance = res2.data.data.balance;
								this.infoList.disabled = "disabled";
								this.infoList.coupon_total = res2.data.data.coupon_total;
								uni.setStorageSync("token", res2.data.data.token);
							}, 1000);
						}else{
							uni.showToast({
								icon: 'none',
								title: res2.data.msg
							})
						}
					}
				})
			},
			openOrder(num){//我的订单
				uni.navigateTo({
					url: '/pages/me/order/index?num=' + num
				})
			},
			openTopUp(){
				uni.navigateTo({
					url: '/pages/me/topUp/index?'
				})
			},
			openMap(latitude,longitude,name,address){//门店导航
				wx.openLocation({
					latitude,
					longitude,
					name,
					address,
					scale: 18
				})
			},
			makePhoneCall(num){//联系客服
				uni.makePhoneCall({
				    phoneNumber: num
				});
			},
			openAboutme(){//关于我们
				uni.navigateTo({
					url: '/pages/me/aboutMe/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page{
		background-color: #f5f5f9;
		.header{
			background-color: #fff;
			padding: 40upx;
			padding-bottom: 30upx;
			margin-bottom: 20upx;
			.head{
				display: flex;
				.headImg{
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 30upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.nickName{
					font-size: 34upx;
					height: 120upx;
					line-height: 120upx;
				}
			}
			.foot{
				display: flex;
				margin-top: 40upx;
				.item{
					width: 50%;
					.top{
						font-size: 34upx;
						text-align: center;
					}
					.bottom{
						font-size: 24upx;
						color: #939393;
						text-align: center;
					}
				}
				.item_center{
					width: 1px;
					height: 40upx;
					background-color: #ccc;
					margin-top: 20upx;
				}
			}
		}
		.order_message{
			padding: 40upx 20upx;
			background-color: #fff;
			display: flex;
			margin-bottom: 20upx;
			.item{
				width: 25%;
				font-size: 28upx;
				color: #3e3737;
				.top{
					width: 60upx;
					height: 60upx;
					margin: 0 auto;
					margin-bottom: 10upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.bottom{
					text-align: center;
				}
			}
		}
		.topUp,.content{
			margin-bottom: 20upx;
			.item{
				position: relative;
				font-size: 30upx;
				line-height: 100upx;
				background-color: #fff;
				padding: 0 110upx;
				display: flex;
				justify-content: space-between;
				image{
					position: absolute;
					top: 24upx;
					left: 40upx;
					width: 50upx;
					height: 50upx;
				}
				.right{
					color: #898989;
					font-style: italic;
				}
				.icon-right{
					position: absolute;
					top: 6px;
					right: 40upx;
				}
			}
		}
		.content .item{
			border-bottom: 1px solid #eee;
		}
	}
</style>
